<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ShopCar</title>
    <link rel="stylesheet" href="注册common.css">
    <link rel="stylesheet" href="注册.css">
    <script src="../ajax/jquery-3.5.1.min.js"></script>
    <style>
        body, button, input, select, textarea {
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
        }
        address, cite, dfn, em, var {
            font-style: normal;
        }
        *{
            margin: 0;
            padding: 0;
        }
        input{
            zoom: 130%;
        }
        body{
            background-color: #eae8eb;
        }
        .car-content {
            width: 1190px;
            margin: 30px auto;
            background-color: #eae8eb;
        }
        .car{
            min-height: 200px;
            -webkit-border-radius: 24px;
            -moz-border-radius: 24px;
            border-radius: 24px;
            overflow: hidden;
            background-color: #ffffff;
        }
        .car-bar{
            overflow: hidden;
            font-size: 12px;
            position: relative;
            height: 72px;
            padding: 0 18px;
            border-bottom: 1px solid #e6e6e6;
        }
        .car-num{
            overflow: hidden;
            color: #000;
            font-size: 18px;
            font-weight: 600;
            height: 72px;
            line-height: 72px;
        }
        .car-money {
            position: absolute;
            right: 18px;
            top: 0;
            height: 72px;
            line-height: 72px;
            font-size: 14px;
        }
        .car-money .car-text-pay {
            position: relative;
            top: -2px;
        }
        .car-price {
            font-family: Arial,Verdana;
            font-weight: 400;
            margin-right: 12px;
            font-size: 22px;
            color: #FF5000;
        }
        .price em {
            font-family: Verdana,Arial;
            padding-left: 2px;
            font-weight: 500;
        }
        .total-sym {
            font-size: 12px;
            font-weight: 400;
        }
        .submit-btn {
            display: inline-block;
            width: 74px;
            height: 42px;
            line-height: 42px;
            color: #fff;
            background: #FF5000;
            border-radius: 21px;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            position: relative;
            top: -2px;
            font-size: 16px;
        }
        .main {
            min-height: 210px;
        }
        .table-th {
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            color: #3c3c3c;
            font-weight: 700;
        }
        .th{
            float: left;
        }
         .check {
            font-size: 12px;
            text-align: left;
            position: relative;
            height: 50px;
        }
        .select-all {
            left: 8px;
            top: 0;
            width: 80px;
            font-size: 13px;
            cursor: pointer;
            float: left;
            font-size: 17px;
            margin-left: 10px;
        }
        .checkbox {
            margin: -1px 0 0 15px;
            position: relative;
            display: inline-block;
        }
        .checkbox input{
            position: absolute;
            z-index: 1;
            left: -10px;
            top: 14px;
        }
        .list{
            font-size: 17px;
            float: left;
           display: inline-block;
            margin-top: -82px;
            margin-left: 75px;
            overflow: hidden;
        }
        .list td{
            padding: 80px;
        }
        .shop-info span{
            font-size: 15px;
            margin-top: 0px;
            position: absolute;
        }
        .shop-info input{
            margin-top: 3px;
            margin-left: 20px;

        }
        .order-content{
            background-color: #f5f5f5;
            border: 1px solid #f5f5f5;
            border-radius: 18px;
            height: 133px;
            margin: 0 24px;
            position: absolute;
            width: 1140px;
        }
        .shop-info span a{
            font-size: 13px;
            text-decoration: none;
            color: #000000;
        }
        .shop-info span a:hover{
            color: #ff4400;
        }
        .order-content ul{
            margin-left: 30px;
            margin-top: 15px;
        }
        li{
            display: inline-block;
        }
        ul{
            padding:0;
            margin: 0;
            list-style: none;
            display: inline-block;
        }
        .item{
            height: 120px;
        }
        .car-content1 .check-btn {
            height: 20px;
            position: absolute;
        }
        .img{
            margin-top:0px;
            margin-left: 20px;
            display: inline-block;
        }
        .item-text{
            position: absolute;
            display: inline-block;
            width: 120px;
            margin-bottom: 50px;

        }
        .item-text a{
            text-decoration: none;
            color:#3c3c3c;
            position: absolute;
            top: 21px;
            font-size: 13px;
        }
        .item-text a:hover{
            color: #ff4400;
        }
        .information{
            font-size: 15px;
            position: absolute;
            left: 300px;
            top: 0px;
            height: 132px;
            width: 120px;
            text-align: center;
        }
        .information span{
            position: relative;
            top: 50px;
        }
        .mid-price{
            height: 120px;
            width: 100px;
            display: inline-block;
            left: 420px;
            position: absolute;
            text-align: center;
        }
        .mid-price em {
            position: relative;
            color: #3c3c3c;
            font-weight: 700;
            font-size: 15px;
            font-family: Verdana,Tahoma,arial;
            top: 50px;
        }
        .mid-num{
            height: 120px;
            width: 100px;
            display: inline-block;
            left: 616px;
            position: absolute;
            text-align: center;
        }
        .mid-num em{
            position: relative;
            color: #3c3c3c;
            font-weight: 700;
            font-size: 15px;
            font-family: Verdana,Tahoma,arial;
            top: 50px;
        }
        .mid-amount{
            height: 120px;
            width: 100px;
            display: inline-block;
            left: 810px;
            position: absolute;
            text-align: center;
        }
        .mid-amount span{
            position: relative;
            color: #f40;
            font-weight: 700;
            font-size: 18px;
            top: 50px;
        }
        .mid-co{
            height: 120px;
            width: 100px;
            display: inline-block;
            left: 1005px;
            position: absolute;
            text-align: center;
        }
        .mid-co a{
            position: relative;
            text-decoration: none;
            font-size: 16px;
        }
        .mid-co a:hover{
            color: chocolate;
        }
        .car-po{
            left: 33px;
            text-align: center;
            position: absolute;
            top: 50px;
            width: 40px;
            height: 25px;
        }
        .total-sym{
            font-size: 25px;
        }
        .FuHao{
            color: crimson;
            font-size: 18px;
            position: absolute;
            top: 50px;
        }
    </style>
</head>
<body>
<div class="shortcut">
    <div class="wrapper">
        <i class="avatar"></i>
        <ul>
            <li><a href="登录login.html" id="top">您好！请先登录</a></li>
            <li><a href="注册导航.html">免费注册</a></li>
            <li><a href="index.html">主页</a></li>
            <li><a href="商品页面.html">浏览的商品</a></li>
            <li><a href="收货中心.html">收货中心</a></li>
            <li><a href="homePage.html">个人中心</a></li>
            <li><a href="视觉介绍.html"><span></span>官网</a></li>
        </ul>
    </div>
</div>
<div class="car-content">
    <div class="car-banner">
        <div class="car">
            <div class="car-nav">
                <div class="car-bar">
                    <span class="car-num">购物车 （全部）</span>
                    <div class="car-money">
                        <span class="car-text-pay">已选商品（不含运费）</span>
                        <strong class="car-price">
                            <em class="car-total">
                                <span class="total-sym">￥0.00</span>
                            </em>
                        </strong>
                        <a class="submit-btn">结&nbsp;算</a>
                    </div>
                </div>
                <div class="main">
                    <div class="table-th">
                        <div class="th check">
                            <div class="select-all">
                                <div class="checkbox">
                                    <input type="checkbox" id="CheckAll">
                                    <div>
                                        &nbsp;&nbsp;全选
                                    </div>
                                </div>
                            </div>
                        </div>
                        <table class="list">
                            <tr>
                                <td>商品信息</td>
                                <td>单价</td>
                                <td>数量</td>
                                <td>金额</td>
                                <td>操作</td>
                            </tr>
                        </table>
                    </div>
                    <tobody class="to_body">
<!--                        <div class="main">-->
<!--                            <div class="order-list">-->
<!--                                <div class="order-content">-->
<!--                                    <ul class="car-content1">-->
<!--                                        <li class="check-btn">-->
<!--                                            <input type="checkbox" name="check" class="second-check all-ch">-->
<!--                                        </li>-->
<!--                                        <li class="item">-->
<!--                                            <div class="img">-->
<!--                                                <img src="img/nike0.png" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="item-text">-->
<!--                                                <a href="#">休闲可以到达的大家解答解答解答解答急啊家的鞋子</a>-->
<!--                                            </div>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                    <div class="information">-->
<!--                                        <span>颜色:黑色</span>-->
<!--                                        <br>-->
<!--                                        <span>尺码:42</span>-->
<!--                                    </div>-->
<!--                                    <div  class="mid-price">-->
<!--                                        <em>￥69.00</em>-->
<!--                                    </div>-->
<!--                                    <div class="mid-num">-->
<!--                                        <em>1</em>-->
<!--                                    </div>-->
<!--                                    <div class="mid-amount">-->
<!--                                        <div class="FuHao">￥</div>-->
<!--                                        <span class="count-price">69.00</span>-->
<!--                                    </div>-->
<!--                                    <div class="mid-co">-->
<!--                                        <div class="car-po" name="dle">-->
<!--                                            <a href="#">删除</a>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
                    </tobody>
                </div>
<!--                渲染-->
<!--                渲染-->
                <div class="footer"></div>
            </div>
        </div>
    </div>
 </div>
<script>
    const FirstLi=document.querySelector('.shortcut ul li:nth-child(1)')
    const SecondLi=FirstLi.nextElementSibling
    const ToBody=document.querySelector('tobody')
    const len=document.querySelector('.car-num')
    const uname=JSON.parse(sessionStorage.getItem('YM'))||[]
    show()
    SecondLi.addEventListener('click',function (){
        sessionStorage.removeItem('YM')
        show()
        location.href='index.html'

    })


    // 删除业务
    ToBody.addEventListener('click',function (e){
        if (e.target.tagName=== 'A'){
            // console.log(123)
            console.log(e.target.dataset.id)
            if (confirm('您确定要删除这条信息吗？')){
                $.ajax({
                    url:'http://127.0.0.1:5000/del',
                    type:'get',
                    data:{"id":e.target.dataset.id,"username":uname.username},
                    success:function (mes){
                        if (mes==='true'){
                            alert("删除成功！")
                            show()
                        }
                    }
                })
            }
        }
    })
    function show(){
        $.ajax({
            url:'http://127.0.0.1:5000/rendershopcar',
            type:'get',
            async:false,
            data:{"username":uname.username},
            success:function (pros){
                let str=''
                if (pros!=null&&pros!=''){
                    len.innerHTML=`购物车(共有${pros.length}条数据)`
                    const FirstLi=document.querySelector('.shortcut ul li:nth-child(1)')
                    const SecondLi=FirstLi.nextElementSibling
                    if (uname==[]){
                        alert("请先登录")
                    }
                    else {
                        if (uname){
                            FirstLi.innerHTML=`<a href="javascript:;"><i class="iconfont"><img src="img/用户-角色-用户名-单人_jurassic.jpg" alt="" height="30">${uname.name}</i></a>`
                            SecondLi.innerHTML=`<a href="javascript:;">退出登录</a>`
                        }
                        else{
                            FirstLi.innerHTML=`<a href="登录login.html">您好！请先登录</a>`
                            SecondLi.innerHTML=`<a href="注册导航.html">免费注册</a>`

                        }
                    }
                    for (let i = 0; i < pros.length; i++) {
                        str+=`<div class="main">
                            <div class="order-list">
                                <div class="order-content">
                                    <ul class="car-content1">
                                        <li class="check-btn">
                                            <input type="checkbox" name="check" data-id="${i}" class="second-check all-ch ck">
                                        </li>
                                        <li class="item">
                                            <div class="img">
                                                <img src="${pros[i].img}" height="110">
                                            </div>
                                            <div class="item-text">
                                                <a href="#"> ${pros[i].name}</a>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="information">
                                        <span>尺码:${pros[i].size}</span>
                                    </div>
                                    <div  class="mid-price">
                                        <em>￥${pros[i].price}</em>
                                    </div>
                                    <div class="mid-num">
                                        <em>${pros[i].num}</em>
                                    </div>
                                    <div class="mid-amount">
                                        <div class="FuHao">￥</div>
                                        <span class="count-price">${parseInt(pros[i].price)*pros[i].num}</span>
                                    </div>
                                    <div class="mid-co">
                                        <div class="car-po" name="dle">
                                            <a href="#" data-id="${pros[i].goodsId}">删除</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`
                    } $('.to_body').html(str);
                    const input=document.querySelectorAll('.check-btn .ck')
                    console.log(input)
                    const CheckALL=document.querySelector('#CheckAll')
                    const price=document.querySelectorAll('.count-price')
                    const SUM=document.querySelector('.total-sym')
                    CheckALL.addEventListener('click',function (){
                        for (let i=0;i<input.length;i++){
                            input[i].checked=this.checked
                        }
                    })
                    for (let i = 0; i <input.length ; i++) {
                        input[i].addEventListener('click',function (){
                            if (document.querySelectorAll('.ck:checked').length===input.length){
                                CheckALL.checked=this.checked
                            }
                            else {
                                CheckALL.checked=false
                            }
                        })
                    }
                    let sum=0
                    CheckALL.addEventListener('click',function (){
                        if (CheckALL.checked){
                            sum=0
                            for (let i = 0; i < price.length ;i++) {
                                if (input[i].checked){
                                    sum+=parseInt(price[i].innerHTML)
                                }
                            }
                            Sum=sum.toString()
                            console.log(sum)
                            SUM.innerHTML='￥'+Sum+'.00'
                        }
                        else {
                            for (let i = 0; i < price.length ;i++) {
                                sum-=parseInt(price[i].innerHTML)
                            }
                            Sum=sum.toString()
                            console.log(sum)
                            SUM.innerHTML='￥'+Sum+'.00'
                        }
                    })
                    ToBody.addEventListener('click',function (e){

                        if (e.target.tagName==='INPUT'){
                            console.log(ToBody.getElementsByTagName('input')[parseInt(e.target.dataset.id)])
                            if (ToBody.getElementsByTagName('input')[parseInt(e.target.dataset.id)].checked){
                                sum+=parseInt(price[e.target.dataset.id].innerHTML)
                                Sum=sum.toString()
                                console.log(sum)
                                SUM.innerHTML='￥'+Sum+'.00'
                            }
                            else {
                                sum-=parseInt(price[e.target.dataset.id].innerHTML)
                                Sum=sum.toString()
                                SUM.innerHTML='￥'+Sum+'.00'
                            }

                        }

                    })
                }
                else {
                    const FirstLi=document.querySelector('.shortcut ul li:nth-child(1)')
                    const SecondLi=FirstLi.nextElementSibling
                    if (uname==[]){
                        alert("请先登录")
                    }
                    else {
                        if (uname){
                            FirstLi.innerHTML=`<a href="javascript:;"><i class="iconfont"><img src="img/用户-角色-用户名-单人_jurassic.jpg" alt="" height="30">${uname.name}</i></a>`
                            SecondLi.innerHTML=`<a href="javascript:;">退出登录</a>`
                        }
                        else{
                            FirstLi.innerHTML=`<a href="登录login.html">您好！请先登录</a>`
                            SecondLi.innerHTML=`<a href="注册导航.html">免费注册</a>`

                        }
                    }
                    ToBody.innerHTML='.您的购物车空空的....'
                }
            }
        })
    }
</script>
</body>
</html>